<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/struts-tags.tld" prefix="s"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>喜乐康智能家居系统</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
	
  	<script type="text/javascript">
  		var currentPage = 1;
  		var totalPage = <s:property value="totalPage"/>;
  		var maxRoomId = 0;
  		var pressRoomId = 0;
		function roomUp(upordown){
			if(currentPage >1){
				if(upordown=='up'){
					$("#roomUP").css("background-image","url('"+evn_Path+"resource/room_up.png')");
					currentPage = currentPage-1;
					$(".roomGroup").css("display","none");
					$("#roomGroup"+currentPage).css("display","block");
					var roomId = 0;
					$("#roomGroup"+currentPage).find("#roomId").each(function(){
						var index = $("#roomGroup"+currentPage).find("#roomId").index(this);
						if(index+1 == 5){
							roomId = $(this).val();
						}
					})
					
					setFocus(roomId);
					if(currentPage==1){
						$("#roomUP").css("background-image","url('"+evn_Path+"resource/room_up_disabled.png')");
					}
					if(currentPage < totalPage){
						$("#roomDown").css("background-image","url('"+evn_Path+"resource/room_down.png')");
					}
				}else if(upordown=='down'){
					$("#roomUP").css("background-image","url('"+evn_Path+"resource/room_up_press.png')");
				}else if(upordown=='out'){
					$("#roomUP").css("background-image","url('"+evn_Path+"resource/room_up.png')");
				}
			}
		}
		function roomSave(upordown){
			if(upordown=='up'){
				$("#roomSave").css("background-image","url('"+evn_Path+"resource/room_save.png')");
				saveRoom();
			}else if(upordown=='down'){
				$("#roomSave").css("background-image","url('"+evn_Path+"resource/room_save_press.png')");
			}else if(upordown=='out'){
				$("#roomSave").css("background-image","url('"+evn_Path+"resource/room_save.png')");
			}
		}

		function roomDown(upordown){
			if(currentPage < totalPage){
				if(upordown=='up'){
					$("#roomDown").css("background-image","url('"+evn_Path+"resource/room_down.png')");
					currentPage = currentPage+1;
					$(".roomGroup").css("display","none");
					$("#roomGroup"+currentPage).css("display","block");
					var roomId = 0;
					$("#roomGroup"+currentPage).find("#roomId").each(function(){
						var index = $("#roomGroup"+currentPage).find("#roomId").index(this);
						if(index+1 == 1){
							roomId = $(this).val();
						}
					})
					setFocus(roomId);
					if(currentPage==totalPage){
						$("#roomDown").css("background-image","url('"+evn_Path+"resource/room_down_disabled.png')");
					}
					if(currentPage > 1){
						$("#roomUP").css("background-image","url('"+evn_Path+"resource/room_up.png')");
					}
				}else if(upordown=='down'){
					$("#roomDown").css("background-image","url('"+evn_Path+"resource/room_down_press.png')");
				}else if(upordown=='out'){
					$("#roomDown").css("background-image","url('"+evn_Path+"resource/room_down.png')");
				}
			}
		}

		function addRoom(roomId){
			var roomName = $("#room_content_left_ul_li"+roomId+" .room_content_left_ul_li_div .room_content_left_text");
			$(".room_content_left_text").each(function(){
				var roomNameTmp = $(this).val();
				if(roomNameTmp!=null && roomNameTmp.trim()!="" && roomName.val()==roomNameTmp){
					
					if(roomName.attr("name")!=$(this).attr("name")){
						alert("房间名称不能重复！");
						var f = document.getElementsByName("roomName"+roomId)[0];
						window.setTimeout(function(){f.focus();}, 0);
						return ;
					}
					
				}
			});
			
			if(roomName.val() != null && roomName.val().trim() != "" && roomName.val().length > 20){
				alert("房间名称长度不能大于20个字符!");
				var f = document.getElementsByName("roomName"+roomId)[0];
				window.setTimeout(function(){f.focus();}, 0);
				return;
			}
			if(currentPage == totalPage){
				var hasEmpty = false;
				$("#roomGroup"+currentPage+" .room_content_left_text").each(
							function(){
								if($(this).val()==null || $(this).val()==""){
									hasEmpty = true;
								}
							}
						);
				if(!hasEmpty){
					$("#roomDown").css("background-image","url('"+evn_Path+"resource/room_down.png')");
					totalPage = totalPage+1;
					var addRoomHtml = "<div id='roomGroup"+totalPage+"' class='roomGroup' style='display:none;'>";
					addRoomHtml+=getRoomItemHtml(maxRoomId+1);
					addRoomHtml+=getRoomItemHtml(maxRoomId+2);
					addRoomHtml+=getRoomItemHtml(maxRoomId+3);
					addRoomHtml+=getRoomItemHtml(maxRoomId+4);
					addRoomHtml+=getRoomItemHtml(maxRoomId+5);
				    addRoomHtml+="</div>";
					maxRoomId+=5;
					$(".room_content_left").append(addRoomHtml);
				}
			}
		}

		function getRoomItemHtml(roomId){
			var roomItemHtml = "<ul>";
			roomItemHtml+="<li class=\"room_content_left_ul_li\" id=\"room_content_left_ul_li"+roomId+"\">";
			roomItemHtml+="<div class=\"room_content_left_ul_li_div\">"
			roomItemHtml+="<span class=\"room_content_left_label\">房间名称</span>";
			roomItemHtml+="<input type=\"hidden\" value="+roomId+" name=\"roomId\" id=\"roomId\">";
			roomItemHtml+="<input type=\"text\" onfocus=\"pressRoom("+roomId+");\"  onblur=\"addRoom("+roomId+");\" id=\"roomName\" name=\"roomName"+roomId+"\" class=\"room_content_left_text\">";
			roomItemHtml+="<span class=\"room_content_left_label2\">房型图</span>";
			roomItemHtml+="<select id=\"roomImage\" onfocus=\"pressRoom("+roomId+");\" name=\"roomImage\" class=\"roomSelect\">";
			roomItemHtml+="<option value=\"0\">请选择</option>";
			roomItemHtml+="<option value=\"1\">客厅</option>";
			roomItemHtml+="<option value=\"2\">餐厅</option>";
			roomItemHtml+="<option value=\"3\">卧室</option>";
			roomItemHtml+="<option value=\"4\">厨房</option>";
			roomItemHtml+="</select>";
			roomItemHtml+="</div>";
			roomItemHtml+="</li>";
			roomItemHtml+="</ul>";
			return roomItemHtml;
		};

  	  	function saveRoom(){
  	  		var roomName = $("#room_content_left_ul_li"+pressRoomId+" .room_content_left_ul_li_div .room_content_left_text");
  	  		var error = false;
			$(".room_content_left_text").each(function(){
				var roomNameTmp = $(this).val();
				if(roomNameTmp!=null && roomNameTmp.trim()!="" && roomName.val()==roomNameTmp){
					if(roomName.attr("name")!=$(this).attr("name")){
						var f = document.getElementsByName("roomName"+pressRoomId)[0];
						window.setTimeout(function(){f.focus();}, 0);
						error = true;
					}
					
				}
			});
			if(roomName.val() != null && roomName.val().trim() != "" && roomName.val().length > 20){
				var f = document.getElementsByName("roomName"+pressRoomId)[0];
				window.setTimeout(function(){f.focus();}, 0);
				error = true;
			}
			if(!error){
				var arrayObj = new Array();　
				$(".room_content_left_ul_li_div").each(
						function (){
							arrayObj.push({
								"roomId":$(this).find("#roomId").val(),
								"roomName":$(this).find("#roomName").val(),
								"roomImage":$(this).find("#roomImage").val()
							});
						//	alert(room.roomName);
						}
						);
				var roomA = new RoomAll();
				roomA.roomList = arrayObj;
				 $.ajax({type:'post',
					 url:'<%=basePath%>setting!saveRoom.do',  
					 data:{jsonData:escape($.toJSON(roomA))},
					 success:function(data){
						if(data=='success'){
							alert("保存成功！");
							$('.setting_background').load('setting!room.do');
						}else{
							alert("保存失败！");
						}
					 }
					}); 
			}
  	  		

  	  	}

  	  	function pressRoom(roomId){
  	  		$.get("callVK.do");
  	  		pressRoomId = roomId;
  	  		$(".room_content_left_ul_li").css("background-image","url('"+evn_Path+"resource/room_text_background.png')");
  	  		var roomNameAll = $(".room_content_left_ul_li .room_content_left_ul_li_div .room_content_left_text");
	  	  	roomNameAll.css("border-width","");
	  	    roomNameAll.css("border-style","");
	  	    roomNameAll.css("border-color","");
	  	    var roomImageAll = $(".room_content_left_ul_li .room_content_left_ul_li_div .roomSelect");
	  	    roomImageAll.css("border-width","");
	  	    roomImageAll.css("border-style","");
	  	    roomImageAll.css("border-color","");

	  	   $(".room_content_left_ul_li .room_content_left_ul_li_div .room_content_left_label").css("color","black");
	  	   $(".room_content_left_ul_li .room_content_left_ul_li_div .room_content_left_label2").css("color","black");
	  	    
			$("#room_content_left_ul_li"+roomId).css("background-image","url('"+evn_Path+"resource/room_text_background_press.png')");
			var roomName = $("#room_content_left_ul_li"+roomId+" .room_content_left_ul_li_div .room_content_left_text");
			roomName.css("border-width","1px");
			roomName.css("border-style","solid");
			roomName.css("border-color","#FF9C0D");
			var roomImage = $("#room_content_left_ul_li"+roomId+" .room_content_left_ul_li_div .roomSelect");
			roomImage.css("border-width","1px");
			roomImage.css("border-style","solid");
			roomImage.css("border-color","#FF9C0D");

			$("#room_content_left_ul_li"+roomId+" .room_content_left_ul_li_div .room_content_left_label").css("color","#FF9C0D");
		  	$("#room_content_left_ul_li"+roomId+" .room_content_left_ul_li_div .room_content_left_label2").css("color","#FF9C0D");
  	  	}
  	  	
  	  	function setFocus(roomId){
  	  		var f = document.getElementsByName("roomName"+roomId)[0];
			window.setTimeout(function(){f.focus();}, 0);
  	  	}
  	  	
  	  	$(function(){
  	  		setFocus(1);
  	  	});
  	</script>
  	
  </head>
  
  <body>
  	<div class="room_content">
  		<div class="room_content_left">
			<s:bean name="org.apache.struts2.util.Counter" id="counter">
				<s:param name="first" value="1"></s:param>
                <s:param name="last" value="totalPage"></s:param>
				<s:iterator>
					<div id="roomGroup<s:property value="current-1"/>" class="roomGroup"
									<s:if test="current-1 > 1">
										style="display:none;"
									</s:if>
								>
						<s:iterator id="room" value="roomList" status="status">
							<s:if test="#status.index+1 == roomList.size()">
								<script type="text/javascript">
									maxRoomId = <s:property value="roomId"/>;
								</script>
							</s:if>
							<s:if test="#status.index+1 <= (current-1)*5">
								<s:if test="#status.index+1 > (current-2)*5">
										<ul>
											<li class="room_content_left_ul_li" id="room_content_left_ul_li<s:property value="roomId"/>">
							  					<div class="room_content_left_ul_li_div">
							  						<input type="hidden" id="roomId" name="roomId" value="<s:property value="roomId"/>" />
							  						<span class="room_content_left_label" id="room_content_left_label<s:property value="roomId"/>">房间名称</span>
							  						<input  class="room_content_left_text" type="text" id="roomName" name="roomName<s:property value="roomId"/>" onfocus="pressRoom(<s:property value="roomId"/>);" onblur="addRoom(<s:property value="roomId"/>);" value="<s:property value="roomName"/>"/>
							  						<span class="room_content_left_label2" id="room_content_left_label2<s:property value="roomId"/>">房型图</span>
							  						<select class="roomSelect" onfocus="pressRoom(<s:property value="roomId"/>);" name="roomImage" id="roomImage">
							  							<option value="0" 
							  							<s:if test="roomImage==0">
							  								SELECTED
							  							</s:if>
							  							>请选择</option>
							  							<option value="1" <s:if test="roomImage==1">
							  								SELECTED
							  							</s:if>>客厅</option>
							  							<option value="2" <s:if test="roomImage==2">
							  								SELECTED
							  							</s:if>>餐厅</option>
							  							<option value="3" <s:if test="roomImage==3">
							  								SELECTED
							  							</s:if>>卧室</option>
							  							<option value="3" <s:if test="roomImage==4">
							  								SELECTED
							  							</s:if>>厨房</option>
							  						</select>
							  					</div>
							  				</li>
										</ul>
										
								</s:if>
							</s:if>
							
						</s:iterator>
						<s:if test="roomList.size() < (current-1)*5">
							<s:if test="totalPage == current-1">
								<s:bean name="org.apache.struts2.util.Counter" id="counter">
								<s:param name="first" value="roomList.size()+1"></s:param>
				                <s:param name="last" value="totalPage * 5"></s:param>
									<s:iterator>
										<script type="text/javascript">
											maxRoomId +=1;
										</script>
										<ul>
											<li class="room_content_left_ul_li" id="room_content_left_ul_li_tmp<s:property value="current-1"/>">
							  					<div class="room_content_left_ul_li_div">
							  						<input type="hidden" value="" id="roomId" name="roomId"/>
							  						<span class="room_content_left_label">房间名称</span>
							  						<input class="room_content_left_text" type="text" id="roomName" name="roomNameTemp<s:property value="current-1"/>"  value="<s:property value="roomName"/>"/>
							  						<script type="text/javascript">
														$("input[name='roomNameTemp<s:property value="current-1"/>']").attr('name','roomName'+maxRoomId);
														$("#room_content_left_ul_li_tmp<s:property value="current-1"/>").find("#roomId").val(maxRoomId);
														$("#room_content_left_ul_li_tmp<s:property value="current-1"/>").attr('id','room_content_left_ul_li'+maxRoomId);
														$("input[name='roomName"+maxRoomId+"']").attr('onfocus','pressRoom('+maxRoomId+')');
														$("input[name='roomName"+maxRoomId+"']").attr('onblur','addRoom('+maxRoomId+')');
													</script>
							  						
							  						<span class="room_content_left_label2">房型图</span>
							  						<select class="roomSelect" name="roomImage" id="roomImage">
							  							<option value="0">请选择</option>
							  							<option value="1">客厅</option>
							  							<option value="2">餐厅</option>
							  							<option value="3">卧室</option>
							  							<option value="3">厨房</option>
							  						</select>
							  					</div>
							  				</li>
										</ul>
									</s:iterator>
								</s:bean>
							</s:if>
						</s:if>
					</div>
				</s:iterator>
			</s:bean>
			
  			
  		</div>
  		<div class="room_content_right">
  			<div class="room_content_right_up_disabled" onmousedown="roomUp('down')"  id="roomUP" onmouseup="roomUp('up')" onmouseout="roomUp('out')">
  			</div>
  			<div class="room_content_right_save" onmousedown="roomSave('down')"  id="roomSave" onmouseup="roomSave('up')" onmouseout="roomSave('out')">
  			</div>
  			<div 
  			<s:if test="totalPage==1">
  			class="room_content_right_down_disabled"	
  			</s:if>
  			<s:else>
  			class="room_content_right_down"
  			</s:else>
  			 onmousedown="roomDown('down')"  id="roomDown" onmouseup="roomDown('up')" onmouseout="roomDown('out')">
  			</div>
  		</div>
  	</div>
  </body>
</html>
